<template>
    <div>
        <v-btn height="40px"
               outlined
               color="warning"
               @click="deleteDialog = true"
               :disabled="disable"
        >
            删除
        </v-btn>
        <v-dialog
                v-model="deleteDialog"
                persistent
                overlay-opacity="0.2"
                max-width="460px"
        >
            <v-card outlined>
                <my-loading-overlay :loading-overlay="loadingOverlay"></my-loading-overlay>
                <v-card-title class="subtitle-1" style="border-bottom: 1px solid #d0dfe7">确认删除</v-card-title>
                <v-card-text class="text-center mt-4">
                    确认要把所选文件放入回收站吗？<br> 删除的文件可在<strong>3</strong>天内通过回收站还原
                </v-card-text>
                <v-card-actions>
                    <v-btn class="ml-10" width="160" color="primary" @click="deleteSelected()">确认</v-btn>
                    <v-btn class="ml-10" width="160" color="warning" @click="deleteDialog = false">取消</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </div>
</template>

<script>
    import {getCapacity} from "../../../util";
    import MyLoadingOverlay from "./MyLoadingOverlay";
    export default {
        name: "MyDeleteBtn",
        components: {MyLoadingOverlay},
        data() {
            return {
                deleteDialog: false,
                loadingOverlay: false
            }
        },
        methods: {
            getCapacity,
            deleteSelected() {
                let _this = this;
                _this.loadingOverlay = true;
                let selectedList = _this.$store.state.selected;
                _this._put({
                    url: 'system/disk/delete-file',
                    data: selectedList
                }).then((rsp) => {
                    _this.getCapacity();
                    _this.$emit("delete-success");
                    _this.deleteDialog = false;
                }).catch((error) => {
                    console.log(error)
                    _this.$serverError();
                }).finally(() => {
                    _this.loadingOverlay = false;
                })
            }
        },
        computed: {
            disable() {
                return !(this.$store.state.selected.length > 0)
            }
        }
    }
</script>

<style scoped>

</style>